<template>
  <div id="app" class="indexSports">
    <a-row :gutter="12" class="mb">
      <a-col :span="24">
        <card :title="'区域活动'" :routerUrl="'/management/SkAreaIndex'">
          <template slot="cardMain">
            <a-row :gutter="12">
              <a-col :sm="24" :xl="6">
                <p class="subtitle">当日区角活动日常</p>
                <stacked-bar :width="'100%'" :height="'277px'" :data="stackedData"></stacked-bar>
              </a-col>
              <a-col :sm="8" :xl="8">
                <p class="subtitle">室内区域欢迎度</p>
                <div style="display: flex;">
                  <!-- <pie :width="'100%'" :height="'277px'" :data="boyData" :text="'男孩'" :subtext="boySubtext"></pie>
                  <pie :width="'100%'" :height="'277px'" :data="girlData" :text="'女孩'" :subtext="girlSubtext"></pie> -->
                  <two-way-bar :width="'100%'" :height="'277px'" :data="towWayBarData"></two-way-bar>
                </div>
              </a-col>
              <a-col :sm="8" :xl="5">
                <p class="subtitle">户外区域欢迎度</p>
                <div style="display: flex;">
                  <!-- <pie :width="'100%'" :data="outDoorPieData" :height="'277px'"></pie> -->
                  <radar  :width="'100%'" :height="'277px'" :data="outDoorPieData" :color="['rgba(0, 154, 254, 0.6)','rgba(84, 114, 211, 0.6)']" :thermal="true" :unit="'人'"></radar>
                </div>
              </a-col>
              <a-col :sm="8" :xl="5">
                <p class="subtitle">专业活动室欢迎度</p>
                <div style="display: flex;">
                  <pie :width="'100%'" :data="roomPieData" :height="'277px'"></pie>
                </div>
              </a-col>
            </a-row>
          </template>
        </card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import StackedBar from '@/components/Echarts/StackedBar.vue'
import Pie from '@/components/Echarts/Pie.vue'
import TwoWayBar from "@/components/Echarts/TwoWayBar.vue"
import Radar from "@/components/Echarts/Radar.vue"
import { getAction } from '@/api/manage.js'
export default {
  name: 'indexSports',
  data() {
    return {
      boyData: [],
      girlData: [],
      towWayBarData:null,
      labelList:[],
      boySubtext: 0,
      girlSubtext: 0,
      outDoorPieData: [],
      roomPieData: [],
      stackedData: [],
      stackedBarName: []
    }
  },
  components: {
    StackedBar,
    Pie,
    Radar,
    TwoWayBar
  },
  props: {
    classList: {
      type: Array,
      default: () => []
    }
  },
  filters: {},

  computed: {},

  async created() {
    // 室内
    await this.getInDoorData(0, 1)
    await this.getInDoorData(0, 2)
    // 室外
    this.getInDoorData(1)
    // 活动室
    this.getInDoorData(2)
    // 区角
    this.getRegionAngle()
  },

  activated() {},

  mounted() {},

  methods: {
    getRegionAngle() {
      const url = '/management/skArea/getAreaClassDuration'
      const params = {
        // endDate:"2023-03-11",
        // startDate:"2023-03-10"
        areaType: 0,
        startDate: this.$skCommon.getDate(0),
        endDate: this.$skCommon.getDate(0, 1)
      }
      getAction(url, params)
        .then(res => {
          if (res.success) {
            this.stackedBarName = this.classList
            let areaList = [],
              barData = []
            if (res.result.length > 0) {
              // res.result[0].classVOList.forEach(item => {
              //   this.stackedBarName.push(item.className)
              // });
              res.result.map(item => {
                areaList.push(item.areaName)
                let data = []
                this.classList.forEach(el => {
                  let areaData = item.classVOList.find(j=>j.className == el)
                  data.push({ value: areaData.duration, inArea: areaData.classInArea,area:item.areaName})
                });
                barData.push(data)
              })
            }
            this.stackedData.push(this.stackedBarName, areaList, barData)
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    // 获取欢迎度
    getInDoorData(areaType, sex) {
      let params = {
        areaType: areaType,
        timeScope: 'today',
        sex: areaType == 0 ? sex : null
      }
      let url = '/management/skArea/getAreaDuration'
      getAction(url, params)
        .then(res => {
          console.log(res);
          if (res.success) {
            let result = res.result.sort((a, b) => {
              return b.studentCount - a.studentCount
            })
            if (areaType == 0) {
              let totalDuration = 0
              result.map(item=>{
                totalDuration += item.duration
              })
              if (sex == 1) {
                this.boyData = result.slice(0, 10).map(item=>{
                  return {
                    label: item.className + item.areaName,
                    value: item.studentCount,
                    scale: (item.duration / totalDuration * 100).toFixed(2)
                  }
                });
              }
              if (sex == 2) {
                // this.girlData = this.handleData(result.slice(0, 10), areaType);
                if (this.boyData.length > 0 ) {
                  this.boyData.map(item=>{
                    result.find(el=>{
                      if (item.label == (el.className + el.areaName)) {
                        this.girlData.push({
                          label: el.className + el.areaName,
                          value: el.studentCount,
                          scale: (el.duration / totalDuration * 100).toFixed(2)
                        })
                      }
                    })
                  })
                }
              }
              if(this.boyData.length > 0 && this.girlData.length > 0){
                this.towWayBarData = {
                  male:{
                    name:"男孩",
                    data:this.boyData.reverse()
                  },
                  female:{
                    name:"女孩",
                    data:this.girlData.reverse()
                  }
                }
              }
            }
            if (areaType == 1) {
              this.outDoorPieData = this.handleData(result.slice(0, 10), areaType)
              console.log(this.outDoorPieData);
            }
            if (areaType == 2) {
              this.roomPieData = this.handleData(result.slice(0, 10), areaType)
            }
            console.log(this.roomPieData);
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    handleData(data, areaType) {
      let totalDuration = 0
      data.forEach(el=>{
        totalDuration += el.duration
      })
      let arr = data.map(item => {
        let name = '';
        if (areaType == 0 && item.className) {
          name = item.className + item.areaName
        } else {
          name = item.areaName
        }
        return {
          name: name,
          value:item.duration,
          studentCount:item.studentCount,
          scale: item.duration == 0?0:(item.duration / totalDuration * 100).toFixed(2)
        }
      })
      return arr
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@img-url: '../../assets/analysis-img/';
.mb {
  margin-bottom: 12px;
}

.subtitle {
  margin: 10px 0 20px 0;
  padding-left: 22px;
  background: url('@{img-url}u93.png') no-repeat 0 50%;
  font-size: 16px;
}
</style>
